<template>
  <div>
    <h6 class="kaoqinpie_title">
      <img src="@/assets/images/shu_03.jpg" alt />
      <span>项目公司考勤概览</span>
    </h6>
    <div id="chartQlty" style="width: 100%;height:200px;"></div>
  </div>
</template>
<style lang="scss" scoped>
@import "@/style/epidemicrisk/epidemicrisk_kaoqinpie.scss";
</style>

<script>
import { projectkaoqinpie } from "@/service/epidemicrisk/index.js";
export default {
  mounted() {
    this.drawQlty();
  },
  methods: {
    //绘制历史空气质量分析饼形图
    drawQlty() {
      // 基于准备好的dom，初始化echarts实例
      let myChartQlty = this.$echarts.init(
        document.getElementById("chartQlty")
      );
      var userId = 1;
      projectkaoqinpie(userId).then(res => {
        // window.console.log(res);
        myChartQlty.setOption({
          /*title : {
            text: '历史空气质量分析',
            subtext: '',
            x:'center'
          },*/
          tooltip: {
            //提示框组件
            trigger: "item", //触发类型，在饼形图中为item
            formatter: "{a} <br/>{b} : {c} ({d}%)" //提示内容格式
          },
          legend: {
            orient: "vertical",
            left: "65%",
            top: "30%",
            // data: res.data.obj.signNames,
            formatter: res.data.obj.signNames //提示内容格式
          },
          series: [
            //series数据系列
            {
              name: "项目方签到占比",
              type: "pie", //饼形图
              radius: ["50%", "70%"],
              center: ["40%", "50%"], //图的位置，距离左跟上的位置
              avoidLabelOverlap: false,
              data: res.data.obj.signCount,
              label: {
                normal: {
                  show: true,
                  position: "outside",
                  formatter: "{b}:{c}"
                },
                emphasis: {
                  show: true,
                  textStyle: {
                    // fontSize: "16",
                    fontWeight: "bold"
                  }
                }
              },
              labelLine: {
                normal: {
                  show: true
                }
              }
            }
          ]
        });
      });
    }
  }
};
</script>